<template>
	<view class="HomeIndex">
		<u-toast ref="uToast"></u-toast>
		<u-navbar leftIcon=" " title=" " :placeholder="true" :bgColor="bgColor">
			<view class="u-nav-slot" slot="center">
				<view class="location-box">
					<image class="notice_icon" src="/static/location.png"></image>
					<view style="font-size:19rpx;">{{ locationProvince }}</view>
				</view>
				<view class="search_box">
					<view class="search_content">
						<u-search search-icon-color="#45B9A2" :disabled="true" @custom="$goUrl('/pages/home/circuit/search','to')" @click="$goUrl('/pages/home/circuit/search','to')" :action-style="searchAction" height="60rpx" bgColor="#f2f2f2" search-icon-size="28" placeholder="请输入线路或目的地"></u-search>
					</view>
				</view>
			</view>
		</u-navbar>
		<view class="index_box">
			<view class="notice_box">
				<view class="flex_box notice_content">
					<image class="notice_icon" src="/static/bell.png"></image>
					<u-notice-bar @click="goNotice" direction="column" icon=" " color="#ffffff" bg-color="#84d1c2" :text="notice"></u-notice-bar>
				</view>
			</view>
			<view class="swiper_box">
				<u-swiper height="350rpx" radius="24rpx" :indicator="true" :list="bannerImages"></u-swiper>
			</view>
			<view class="flex_box flex_row_between option_box">
				<view @tap="$goUrl('/pages/list/list','to')" class="option_item" >	
					<view class="flex_box flex_row_center option_image">
						<u-image width="100rpx" height="100rpx" radius="0" src="/static/qgjd.png"></u-image>
						</view>
					<view class="option_name u-line-1">全国景点</view>
				</view>
				<view @tap="$goUrl('/pages/home/circuit/circuit','to',{category_id:1})" class="option_item" >	
					<view class="flex_box flex_row_center option_image">
						<u-image width="100rpx" height="100rpx" radius="0" src="/static/qglx.png"></u-image>
						</view>
					<view class="option_name u-line-1">全国路线</view>
				</view>
				<view @tap="$goUrl('/pages/mine/card/buy','to')" class="option_item" >	
					<view class="flex_box flex_row_center option_image">
						<u-image width="100rpx" height="100rpx" radius="0" src="/static/buyvip.png"></u-image>
						</view>
					<view class="option_name u-line-1">购买会员</view>
				</view>
				<view @tap="goActive" class="option_item" >
					<view class="flex_box flex_row_center option_image">
						<u-image width="100rpx" height="100rpx" radius="0" src="/static/vipjh.png"></u-image>
						</view>
					<view class="option_name u-line-1">会员激活</view>
				</view>
				<view @tap="goInfo" class="option_item" >	
					<view class="flex_box flex_row_center option_image">
						<u-image width="100rpx" height="100rpx" radius="0" src="/static/zxgg.png"></u-image>
						</view>
					<view class="option_name u-line-1">资讯公告</view>
				</view>
			</view>
			<view class="flex_box flex_row_between option_box" v-if="tabs.length > 0">
				<view @tap="goWebUrl(index)" class="option_item" v-for="(item, index) in tabs" :key="index">	
					<view class="flex_box flex_row_center option_image"><u-image width="100rpx" height="100rpx" radius="0" :src="item.image"></u-image></view>
					<view class="option_name u-line-1">{{ item.name }}</view>
				</view>
			</view>
			<view style="margin-left:-37rpx;">
				<u-image width="102%" height="210rpx" src="/static/joinfws.png" @click="$goUrl('/pages/home/index/service', 'to')"></u-image>
			</view>
			<view class="jingqu_title">
				<view class="type_main">热门景区</view>
				<view class="type_more flex_box" @tap="$goUrl('/pages/list/list','to')">更多 <u-icon name="arrow-right" color="#999999"></u-icon></view>
			</view>
			<view class="circuit_box jingqu_box">
				<view class="jingqu_item" v-for="(item, index) in jqList" :key="index" @click="$goUrl('/pages/listDetail/listDetail', 'to', {id: item.id})">
					<u-image :src="item.image" width="200rpx" height="200rpx" radius="10rpx"/>
					<view class="title">{{ item.title }}</view>
					<view class="price-box">
						<view class="jingqu_price">￥ {{ item.price }}</view>
						<u-image src="/static/price_tag.png" width="40px" height="16px" />
					</view>
					<view class="tags">{{ item.c_name }}</view>
				</view>
			</view>
			<view class="jingqu_title">
				<view class="type_main">热门线路</view>
				<view class="type_more flex_box" @click="$goUrl('/pages/home/circuit/circuit','to')">更多<u-icon name="arrow-right" color="#999999"></u-icon></view>
			</view>
			<view class="circuit_box jingqu_box">
				<view class="jingqu_item" v-for="(item, index) in hotList" :key="index" @click="$goUrl('/pages/home/circuit/detail', 'to', {id: item.id})">
					<u-image :src="item.image" width="200rpx" height="200rpx" radius="10rpx"/>
					<view class="title">{{ item.title }}</view>
					<view class="price-box">
						<view class="jingqu_price">￥ {{ item.price }}</view>
						<u-image src="/static/viptag.png" width="40px" height="16px" />
					</view>
					<view class="flex_box flex_row_between circuit_b">
						<view class="circuit_b_num">￥{{item.money}}</view>
						<view class="circuit_b_text">已售{{item.ballot}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { checkUpdate } from '@/components/yzhua006-update/js/app-update-check.js';
	import {
		getInfo,
		getVersion, 
		indexData,
		circuitType,
		circuitList,
		getSetInfo,
		login,
		checkVip
	} from '@/common/http.api.js';
	let that;
	export default {
		data() {
			return {
				bgColor: '#45B9A2',
				searchAction: {width: '100rpx',background: '#45B9A2',color: '#ffffff',fontSize: '24rpx',height: '46rpx',fontWeight: 'bold',textAlign: 'center',lineHeight: '46rpx',borderRadius: '30rpx'},
				bannerList: [],
				bannerImages: [],
				noticeList: [],
				notice: [],
				hotList: [],
				typeList: [{id: '',title: '全部'}],
				typeActive: 0,
				params: {
					page: 1,
					category_id: ''
				},
				list: [],
				listStatus: "loading",
				locationProvince: '',
				tabs: [],
				jqList:[],
				latitude: 0,
				longitude: 0,
			}
		},
		async onLoad(options) {
			that = this;
			if (options.scene) {
				let scene = decodeURIComponent(options.scene).split(','),params={}
				scene.forEach((item,index)=>{
					let param = item.split('=')
					params[param[0]] = param[1]
				})
				if(params.invitation) {
					that.$u.vuex("invitation",params.invitation)
				}
			}
			if (options.invitation) {
				that.$u.vuex("invitation",options.invitation);
			}
			// await that.$store.dispatch('checkToken');
			that.getCurrentLocation();
			that.getType(),that.getList(),that.setShare()
		},
		onShow() {
			// #ifdef APP-PLUS
			that.getAppInfo(0);
			// #endif
		},
		onReachBottom() {
			that.getMore();
		},
		methods: {
			//获取线上APP版本信息
			getAppInfo(type) {
				const system_info = uni.getSystemInfoSync();
				let params = {
					os: system_info.platform //本机设备操作系统  （android || ios）
				};
				if (params.os != 'ios' && params.os != 'android') false; //如果不是安卓或ios 返回false
			
				//这里自行请求API获取版本信息 建议传入操作系统标识，返回本机对应的操作系统最新版本信息，也就是安卓的返回就是安卓的版本信息  ios返回就是ios的版本信息
				getVersion()
					.then(res => {
						let versionInfo = res.data;
						let update_info = {
							version: params.os == 'ios' ? versionInfo.ios_new : versionInfo.newversion, //线上版本
							now_url: params.os == 'ios' ? versionInfo.ios_dn_url : versionInfo.downloadurl, //更新链接
							silent: versionInfo.silent ? versionInfo.silent : 0, //是否是静默更新
							force: versionInfo.enforce, //是否是强制更新
							net_check: versionInfo.net_check ? versionInfo.net_check : 1, //非WIfi是否提示
							note: versionInfo.content //更新内容
						};
						checkUpdate(update_info, type).then(res => {
							if (res.msg) {
								// plus.nativeUI.toast(res.msg);
							}
						}); ///检查更新
						//checkUpdate 这个方法会做什么？：线上版本号 与 本地版本号做对比 ，如果需要更新  根据静默，强制、wifi等信息执行静默更新或跳转到升级页面
						//跳转升级页面的前提是，需要新建并在pages.json中配置升级页面，配置方法请查看插件详情
					})
					.catch(err => {
						uni.$u.toast(err.msg);
					});
			},
			getIndexData() {
				let that = this;
				indexData({data:{lat: that.latitude, lng: that.longitude}}).then(res => {
					that.bannerList = res.data.bannerlist.data
					that.bannerImages = res.data.bannerlist.data.map((a) => {
						return a.image
					});
					that.noticeList = res.data.notice.data
					that.notice = res.data.notice.data.map((a) => {
						return a.title
					});
					that.hotList = res.data.rmlist;
					that.tabs = res.data.tabs.data;
					that.jqList = res.data.jqlist;
				}).catch(err => {
					uni.$u.toast(err.msg);
				});
			},
			// 设置分享参数
			setShare(){
				getSetInfo()
					.then(res => {
						if (res.code == 1) {
							let shareInfo = {
								title: res.data.title, // 默认为小程序名称
								path: that.userInfo ? `/pages/home/index/index?invitation=${that.userInfo.invitation}` : '/pages/home/index/index', // 默认为当前页面路径
								imageUrl: res.data.img
							}
							that.$u.vuex('shareInfo',shareInfo)
							uni.$u.mpShare = shareInfo
						} else {
							uni.$u.toast(res.msg);
						}
					})
					.catch(err => {});
			},
			// 获取分类
			getType(){
				circuitType({}).then(res => {
					that.typeList = that.typeList.concat(res.data.data);
				}).catch(err => {
					uni.$u.toast(err.msg);
				});
			},
			changeType(e){
				that.typeActive = e,that.list = [],that.params = {
					page: 1,
					category_id: that.typeList[e].id
				},that.listStatus="loading";
				uni.$u.sleep(500).then(() => {
					that.getList()
				})
			},
			// 获取列表
			getList(){
				circuitList(that.params).then(res => {
					let list = res.data.data;
					that.listStatus = list.length < res.data.per_page ? "nomore" : "loadmore";
					that.list = [...that.list,...list];
				}).catch(err => {
					uni.$u.toast(err.msg);
				});
			},
			// 点击加载更多
			getMore(){
				that.listStatus==="loadmore"&&(that.params.page++,that.listStatus = "loading",that.getList());
			},
			goNotice(e){
				that.$goUrl('/pages/info/index/detail','to',{id: that.noticeList[e].id,from: 'notice'})
			},
			// 登录
			getPhoneNumber(e){
				if(!e.detail.code){
					return
				}
				login({phone_code: e.detail.code}).then(res=>{
					uni.$u.vuex("loginInfo", res.data.userinfo);
					getInfo()
						.then(res => {
							if (res.code == 1) {
								uni.$u.vuex('userInfo', res.data);
								if(that.shareInfo){
									let shareInfo = {
										title: that.shareInfo.title, // 默认为小程序名称
										path: `/pages/home/index/index?invitation=${that.userInfo.invitation}`, // 默认为当前页面路径
										imageUrl: that.shareInfo.imageUrl
									}
									that.$u.vuex('shareInfo',shareInfo)
									uni.$u.mpShare = shareInfo
								}
							} else {
								uni.$u.toast(res.msg);
							}
						})
						.catch(err => {});
					that.$refs.uToast.show({
						type: "success",
						message: "登录成功",
						complete(){
						}
					});
				}).catch(err=>{
					uni.$u.toast(err.msg);
				});
			},
			// 获取当前位置
			getCurrentLocation() {
				let that = this;
				uni.getLocation({
				  type: 'wgs84',
				  success: function (res) {
				    const latitude = res.latitude; // 纬度
				    const longitude = res.longitude; // 经度
					that.latitude = latitude;
					that.longitude = longitude;
					that.getIndexData();
				    // 使用经纬度获取城市信息
				    uni.request({
				      url: 'https://api.map.baidu.com/geocoder/v2/?ak=Gvw6ZlATEWyfSW8Bhm7vz8eqzBmGcuRb&location=' + latitude + ',' + longitude + '&output=json',
				      success: function (res) {
				        if (res.data.status === 0) {
				          const province = res.data.result.addressComponent.province; // 获取城市名
						  that.locationProvince = province;
				        } else {
				          console.log('获取位置失败');
				        }
				      },
				      fail: function (err) {
				        console.log('请求失败：', err);
				      }
				    });
				  },
				  fail: function (err) {
				    console.log('获取位置失败：', err);
				  }
				});
			},
			goActive() {
				checkVip().then(res => {
					if (res.data == 1) {
						that.$goUrl('/pages/mine/card/card', 'to')
					} else {
						that.$goUrl('/pages/mine/card/active', 'to')
					}
				}).catch(err => {
					uni.$u.toast(err.msg);
				});
			},
			goInfo() {
				uni.switchTab({
					url: '/pages/info/index/index'
				});	
			},
			//跳转
			goWebUrl(e) {
				if (that.tabs[e].url === '') {
					uni.$u.toast("功能开发中，敬请期待！");
					return
				};
				if (parseInt(that.tabs[e].type) === 1) {
					that.$goUrl(that.tabs[e].url, 'to');
				}
				if (parseInt(that.tabs[e].type) === 2) {
					uni.setStorageSync('webInfo',{
						url: that.tabs[e].url,
						title: that.tabs[e].name
					});
					that.$goUrl('/pages/linkOther', 'to')
				}
				if (parseInt(that.tabs[e].type) === 3) {
					console.log(that.tabs[e])
					// #ifdef APP-PLUS
					plus.share.getServices(res => {
						that.sweixin = res.find(i => i.id === 'weixin')
						if (that.sweixin) {
							// 分享跳转到微信小程序
							that.sweixin.launchMiniProgram({
								id: that.tabs[e].url, // 	关联微信小程序的原始ID（"g_"开头的字符串）
								// path: params.path, //	打开小程序的页面路径，不传默认跳转首页
								// type: 0 // 	微信小程序版本类型，可取值： 0-正式版； 1-测试版； 2-体验版。 默认值为0。
							}, res => {
								console.log('成功唤起微信小程序');
							}, err => {
								console.log('失败');
							})
						} else {
							// 没有获取到微信分享服务
							uni.$u.toast("没有获取到微信分享服务");
						}
					}, err => {
						// 获取分享服务列表失败
						uni.$u.toast("获取分享服务列表失败");
					});
					// #endif
					// #ifdef MP-WEIXIN
						let path = that.tabs[e].url;
						let type = path.substr(0,1)
						if(type == 'w'){
							let info = path.split('@')
							let appid = info[0] ?? path;
							let Path = info[1] ?? ''
							wx.openEmbeddedMiniProgram({
							    // 要跳转的小程序的appid
							    appId: appid,
							    path: Path,
							    success: () => {},
							    fail: (error) => {
							        console.log('跳转小程序失败', error)
							    },
							    complete: () => {
							 
							   }
							})
							// wx.navigateToMiniProgram({
							// 	    appId: appid,
							// 		path: path,
							// 	    //develop开发版；trial体验版；release正式版
							// 	    envVersion: 'release', 
							// 	    success(res) {
							// 	      // 打开成功
							// 	      console.log("跳转小程序成功！",res);
							// 	    } 
							// 	})
						}else if(type == 'p'){
							uni.navigateTo({
								url: that.tabs[e].url
							})
						}else{
							wx.navigateToMiniProgram({
									shortLink:that.tabs[e].url,
									//develop开发版；trial体验版；release正式版
									envVersion: 'trial', 
									success(res) {
									  // 打开成功
									  console.log("跳转小程序成功！",res);
									} 
								})
						}
						
						
					// #endif
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.HomeIndex{
		.jingqu_title {
			display: flex;
			margin: 37rpx 0 15px;
			justify-content: space-between;
			.type_main {
				font-size: 30rpx;
				font-weight: bold;
			}
			.type_more {
				color:grey;
			}
		}
		background-color: #F6F8FA;
		.u-nav-slot {
			display: flex;
			justify-content: space-between;
			width: 100%;
			align-items: center;
			padding: 20rpx;
			.notice_icon {
				width: 40rpx;
				height: 45rpx;
			}
			.location-box {
				display: flex;
				flex-direction: column;
				align-items: center;
			}
		}
		.search_box{
			width: 520rpx;
			/* #ifdef MP-WEIXIN */
			padding: 0 150rpx 0 0;
			width: 607rpx;
			padding: 0 200rpx 0 0;
			/* #endif */
			.search_content{
				width: 100%;
				height: 100%;
				border-radius: 36rpx;
				background-color: #f2f2f2;
				padding-right: 10rpx;
			}
		}
		.index_box{
			padding: 0 28rpx;
			.notice_box{
				padding: 20rpx 0;
				.notice_content{
					height: 72rpx;
					background-color: #84d1c2;
					border-radius: 36rpx;
					padding: 0 26rpx;
					.notice_icon{
						width: 32rpx;
						height: 28rpx;
						margin-right: 16rpx;
					}
				}
				::v-deep .u-notice-bar{
					padding: 0;
				}
			}
			.option_box {
				border-radius: 16rpx;
				margin-bottom: 30rpx;
				margin-top: 20rpx;
				.option_item {
					margin: 0 0 20rpx;
					text-align: center;
					.option_image {
						width: 100rpx;
						height: 100rpx;
					}
					.flex_row_center {
						margin-bottom: 20rpx;
					}
					.option_name {
						width: 100%;
						height: 26rpx;
						line-height: 26rpx;
						font-size: 25rpx;
						text-align: center;
					}
				}
			}
			.banner_box{
				padding: 24rpx 0;
			}
			.type_box{
				padding: 24rpx 0;
				overflow-x: scroll;
				.type_main{
					white-space: nowrap;
					.type_item{
						display: inline-block;
						vertical-align: bottom;
						padding: 0 10rpx;
						margin-right: 24rpx;
						.type_content{
							height: 72rpx;
							.type_name{
								font-size: 28rpx;
								font-weight: 500;
								color: #666666;
								line-height: 40rpx;
								margin-bottom: 12rpx;
							}
							.type_icon{
								width: 56rpx;
								height: 20rpx;
							}
						}
					}
					.type_item1{
						.type_content{
							.type_name{
								font-size: 30rpx;
								font-weight: bold;
								color: #1A1A1A;
							}
						}
					}
				}
			}
			.jingqu_box {
				display: flex;
				justify-content: space-between;
			}
			.circuit_box{
				padding: 0 0 24rpx;
				.jingqu_item {
					width:200rpx;
					.title {
					  margin:10px 0 14px;
					  display: -webkit-box;
					  overflow: hidden;
					  text-overflow: ellipsis;
					  word-wrap: break-word;
					  white-space: normal !important;
					  -webkit-line-clamp: 2;
					  -webkit-box-orient: vertical;
					}
					.price-box {
						display: flex;
						justify-content: space-between;
						align-items: center;
						.jingqu_price {
							color: #FF413D;
							font-size: 20rpx;
						}
					}
					.flex_box {
						height: 11px;
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 20rpx;
						color: #999999;
						line-height: 17px;
						-webkit-text-decoration-line: line-through;
						text-decoration-line: line-through;
						justify-content: space-between;
						display: flex;
						margin-top: 12px;
					}
					.tags {
						color:#FF871D;
					}
				}
				.circuit_main{
					.circuit_item{
						width: 340rpx;
						background: #FFFFFF;
						border-radius: 12rpx;
						overflow: hidden;
						margin-bottom: 24rpx;
						.circuit_img{
							width: 100%;
							height: 340rpx;
						}
						.circuit_content{
							padding: 24rpx;
							.circuit_name{
								font-size: 28rpx;
								font-weight: 500;
								color: #1E272E;
								line-height: 40rpx;
								height: 80rpx;
								margin-bottom: 16rpx;
							}
							.circuit_price{
								height: 40rpx;
								.circuit_price_num{
									font-size: 24rpx;
									color: #45B9A2;
									font-weight: bold;
									text{
										font-size: 32rpx;
									}
								}
								.circuit_price_name{
									width: 88rpx;
									height: 32rpx;
									background: #45B9A2;
									border-radius: 0 16rpx 16rpx 16rpx;
									text-align: center;
									line-height: 32rpx;
									font-size: 20rpx;
									line-height: 32rpx;
									color: #ffffff;
									margin-left: 10rpx;
								}
							}
							.circuit_b{
								height: 40rpx;
								.circuit_b_num{
									font-size: 24rpx;
									color: #666666;
									text-decoration: line-through;
								}
								.circuit_b_text{
									font-size: 24rpx;
									font-weight: 500;
									color: #666666;
								}
							}
						}
					}
				}
			}
			.login_box{
				position: fixed;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 80rpx;
				z-index: 99;
				background-color: rgba(0,0,0,0.5);
				padding: 0 30rpx;
				.login_title{
					font-size: 30rpx;
					color: #FFFFFF;
					font-weight: 500;
				}
			}
		}
	}
</style>
